<!-- 详细介绍 -->
<template>
	<view class="info">
		<view class="flex alignCenter tip">
			<view class="flex alignCenter">
				<image src="https://image.alhelp.net/uploads/20231104/f5a50463b8dd7a1b1ea25f211c8ffd65.png" mode="widthFix"></image>
				<view class="font14 color999">尽量详细展示，可以是图片，文字甚至小视频！</view>
			</view>

			<view class="font14 bold num"><text class="colorMain font18">3</text>/3</view>
		</view>

		<view class="cardItem">
			<view class="font14">
				<textarea class="introduction font14" maxlength="100" placeholder="简介内容(100个字符以内)" v-model.trim="introduction"
					cols="30" rows="10"></textarea>
			</view>

			<view class="font14 upload flex">
				<!-- <view class="upload-url flex alignCenter"> -->
				<!-- 图片 -->
				<view class="example-body">
					<uni-file-picker limit="1" v-model="imgUrl" :imageStyles="imageStyles" :borderStyle="borderStyle"
						:del-icon="true" file-mediatype="image" @select="uploadImgClick">
						<view class="pngBox flex alignCenter">
							<view class="color666">
								<view class="addIcon bold">+</view>
								<view class="color333 font14">上传图片</view>
								<view class="font12 color999">2M内</view>
							</view>
						</view>
					</uni-file-picker>
				</view>
				<!-- 视频 -->
				<view class="example-body" v-if="(!videoUrl && !fileUrl) || videoUrl">
					<view class="addBox flex alignCenter" v-if="!videoUrl" @click="uploadVideoClick">
						<view class="color666">
							<view class="addIcon bold">+</view>
							<view class="color333 font14">上传视频</view>
							<view class="font12 color999">一分钟内</view>
						</view>
					</view>

					<view class="hasVideo" v-if="videoUrl">
						<uni-icons class="del-icon" type="clear" color="#fff" size="30" @click="handleDel(1)"></uni-icons>
						<video controls object-fit="cover" :src="videoUrl"></video>
						<!-- <view class="noWidthBtn" @click="uploadVideoClick">重新上传</view> -->
					</view>
				</view>

				<!-- 所有文件，此处验证是否为音频 -->
				<view class="example-body" v-if="(!videoUrl && !fileUrl) || fileUrl">
					<!-- <view v-if="!fileUrl">
						<uni-file-picker limit="1" file-mediatype="all" file-extname="mp3,m4a" @select="uploadFileClick" mode="list"
							:borderStyle="borderStyle" @success="handleFileSuccess">
							<view class="addBox flex alignCenter">
								<view class="color666">
									<view class="addIcon bold">+</view>
									<view class="color333 font14">上传音频</view>
									<view class="font12 color999">一分钟内</view>
								</view>
							</view>
						</uni-file-picker>
					</view> -->
					<view class="audio-box flex alignCenter" v-if="fileUrl">
						<uni-icons class="del-icon" type="clear" color="rgba(0, 0, 0, 0.5)" size="30"
							@click="handleDel(2)"></uni-icons>
						<view v-if="isPlay" class="playItem" @click="handlePlay">
							<uni-icons type="headphones" color="#A95592" size="40" @click="handlePlay"></uni-icons>
							<view class="playTip font10 color999">点击播放</view>
						</view>
						<image class="waveGif" v-else src="../../../static/waveGif.gif" mode="widthFix" @click.stop="handleSuspend">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="btns flex alignCenter font16">
			<view class="btn1 flex alignCenter" @click="handleLast">
				<view class="icons flex alignCenter">
					<image src="../../../static/leftIcon.png" mode="widthFix"></image>
				</view>
				上一步
			</view>
			<view class="btn2 flex alignCenter" @click="handle" v-if="isShow">
				下一步
				<view class="icons flex alignCenter">
					<image src="../../../static/rightIcon.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="btn2 flex alignCenter" @click="handleNext" v-else>
				保存
				<view class="icons flex alignCenter">
					<image src="../../../static/rightIcon.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<u-popup v-model="popup" mode="center">
			<view class="box">
				<view class="top">
					<image src="https://image.alhelp.net/uploads/20231104/f5a50463b8dd7a1b1ea25f211c8ffd65.png" mode="widthFix"></image>
					<view class="font12">
						一个醒目的头像，和响亮的昵称更能得到学弟学妹的信任度喔!
					</view>
				</view>
				<view class="bottom flex">
					<view class="bottom-left flex alignCenter" @click="cancel">
						<view>
							<text class="font12">以后设置</text>
							<text class="font">(在个人中心)</text>
						</view>
					</view>
					<view class="bottom-right flex alignCenter" @click="gotoInfo">
						<text class="font12">立即设置</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
	
</template>

<script>
	import uniFilePicker from "./uni-file-picker/components/uni-file-picker/uni-file-picker.vue"
	import {
		addEducation,
		eduDetail,
		editEdu,
		getEdu
	} from "@/api/mine.js"
	import {
		uploadFile,
		chooseImg,
		previewImg,
		requestAndroidPermission
	} from "@/utils/common.js"
	import {
		addAnswer
	} from "@/api/send.js"
	import {
		watch
	} from "vue";

	export default {
		components:{
			uniFilePicker
		},
		data() {
			return {
				popup:false,
				introduction: '',
				fromPage: '',
				editId: '',
				imageStyles: {
					width: '220rpx',
					height: '220rpx',
					border: {
						radius: '10rpx'
					}
				},
				// 线条样式
				borderStyle: {
					width: '1px',
					color: '#cccccc',
					style: 'dotted',
					radius: '10rpx'
				},
				imgs: [],
				imgUrl: [],
				// fileUrl: 'https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/07/18/5b599c697a504f79af98dcb13eee81cb.mp3',
				fileUrl: '',
				videoUrl: '',
				placeholder: '开始输入...',
				editorCtx: '',
				list: [],
				voicePath: '',
				seconds: 0,
				quesId: '',
				isShow: true,
				answerCon: '',
				audioMusic: null,
				isPlay: true,
				backDelta: '', //返回页面数
				diploma: 2,
			};
		},
		onLoad(option) {
			console.log('0000', option);
			if (option.backDelta) {
				this.backDelta = option.backDelta;
			};
			this.diploma = option.diploma ? option.diploma : 2
			if (option.param) {
				this.fromPage = JSON.parse(option.param);
				this.introduction = this.fromPage.introduce;
				this.editId = this.fromPage.id ? this.fromPage.id : '';
				if (this.fromPage && this.fromPage.fileUrls) {
					for (let item of this.fromPage.fileUrls) {
						if (item.type == 'imgUrl') {
							// 图片
							this.imgUrl = [{
								"name": "",
								"extname": "",
								"url": item.url,
							}]
							// this.imgUrl[0].url = item.url;
						}
						if (item.type == 'fileUrl') {
							// 音频
							this.fileUrl = item.url;
						}
						if (item.type == 'videoUrl') {
							// 视频
							this.videoUrl = item.url
						}
					}
				}
			} else {
				// this.editId = option.editId;
				this.getDetail()
			}
		},
		watch: {
			isShow() {
				this.popup = false;
			}
		},
		methods: {
			// 详情（编辑时调用）
			getDetail() {
				getEdu({
					diploma: this.diploma
				}).then(res => {
					if (res.code == 100000 && res.data) {
						this.editId = res.data.id;
						this.fromPage = {
							diploma: this.diploma,
							graduationYear: res.data.graduationYear, //毕业年份
							schoolCode: res.data.schoolCode,
							schoolName: res.data.schoolName,
							majorCode: res.data.majorCode,
							majorName: res.data.majorName,
							imgUrl: res.data.imgUrl,
							introduce: res.data.introduce,
							tags: res.data.tags,
							fileUrls: res.data.fileUrls,
							id: res.data.id
						}
						this.introduction = res.data.introduce;
						if (res.data.fileUrls.length > 0) {
							for (let item of res.data.fileUrls) {
								if (item.type == 'imgUrl') {
									// 图片
									this.imgUrl = [{
										"name": "",
										"extname": "",
										"url": item.url,
									}]
									// this.imgUrl[0].url = item.url;
								}
								if (item.type == 'fileUrl') {
									// 音频
									this.fileUrl = item.url;
									// this.audioMusic = uni.createInnerAudioContext();
									// this.audioMusic.autoplay = true;
									// this.audioMusic.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
								}
								if (item.type == 'videoUrl') {
									// 视频
									this.videoUrl = item.url
								}
							}
						}
					}
				})
			},
			// 上传视频
			uploadVideoClick() {
				// #ifdef APP-PLUS
				let permisionStr = ''
				if (uni.getStorageSync('systemInfo').platform == 'ios') {
					permisionStr = 'photoLibrary'
				} else {
					permisionStr = 'android.permission.READ_EXTERNAL_STORAGE'
				}
				requestAndroidPermission(permisionStr).then((status) => {
					if (status !== 1 || status === false) {
						return
					}
					uni.chooseVideo({
						sourceType: ['album'],
						maxDuration: 60, //120秒，时长，最长支持60s（小程序会预检一次，在选择文件前就会判断时长的设置，>60直接走fail）
						success: (res) => {
							const tempFilePath = res.tempFilePath;
							uni.getVideoInfo({
								src: tempFilePath,
								success: (result) => {
									console.log('获取视频信息', result)
									if (result.size > 15 * 1024 * 1024) {
										// 超过15M不允许上传，官方说的返回的单位是Kb，但手机实际上是b
										uni.showToast({
											icon: 'none',
											title: '视频不能超过15M'
										})
										return
									}
									if (result.duration > 1 * 60) {
										// 超过2分钟不允许上传
										uni.showToast({
											icon: 'none',
											title: '视频不能超过1分钟'
										})
										return
									}
									uploadFile([tempFilePath]).then((successFile) => {
										console.log('文件', successFile)
										this.videoUrl = successFile.url
									})
								}
							})
							console.log('数据', res)

						},
						fail: (err) => {
							console.error('err', err)
							if (err.errMsg.indexOf('cancelled') != -1) {
								uni.showToast({
									title: '您已取消上传',
									icon: 'none'
								})
								return
							}
							uni.showToast({
								title: err.errMsg,
								icon: 'none'
							})
						}
					});
				})
				// #endif
				// #ifdef MP
				uni.chooseVideo({
					sourceType: ['album'],
					maxDuration: 60, //120秒，时长，小程序最长支持60s（小程序会预检一次，在选择文件前就会判断时长的设置，>60直接走fail）
					success: (res) => {
						console.log('数据', res)
						const tempFilePath = res.tempFilePath;
						uni.getVideoInfo({
							src: tempFilePath,
							success: (result) => {
								console.log('获取视频信息', result)
								if (result.size > 15 * 1024 * 1024) {
									// 超过15M不允许上传，官方说的返回的单位是Kb，但手机实际上是b
									uni.showToast({
										icon: 'none',
										title: '视频不能超过15M'
									})
									return
								}
								if (result.duration > 1 * 60) {
									// 超过1分钟不允许上传
									uni.showToast({
										icon: 'none',
										title: '视频不能超过1分钟'
									})
									return
								}
								uploadFile([tempFilePath]).then((successFile) => {
									console.log('文件', successFile)
									this.videoUrl = successFile.url
								})
							},
							fail: (error) => {
								console.log(error);
							}
						})
					},
					fail: (err) => {
						console.error('err', err)
						if (err.errMsg.indexOf('cancelled') != -1 || err.errMsg.indexOf('cancel') != -1) {
							uni.showToast({
								title: '您已取消上传',
								icon: 'none'
							})
							return
						}
						uni.showToast({
							title: err.errMsg,
							icon: 'none'
						})
					}
				});
				// #endif

			},

			// 上传图片
			uploadImgClick(e) {
				uploadFile(e.tempFilePaths).then((successFile) => {
					this.imgUrl = [{
						"name": "",
						"extname": "",
						"url": successFile.url,
					}]
				})
			},
			// 上传文件--此处用于上传音频
			uploadFileClick(e) {
				let fileType = e.tempFiles[0].name.split('.');
				if (fileType[fileType.length - 1] == 'mp3' || fileType[fileType.length - 1] == 'm4a') {
					uploadFile(e.tempFilePaths).then((successFile) => {
						console.log('文件', successFile)
						this.fileUrl = successFile.url;
						this.fileName = successFile.name;
					})
				}
			},
			// 音频播放
			handlePlay() {
				this.audioMusic = uni.createInnerAudioContext();
				this.audioMusic.autoplay = true;
				this.audioMusic.src = this.fileUrl;
				this.audioMusic.onPlay(() => {
					// 开始播放
					this.isPlay = false;
					console.log('开始播放');
				});
				this.audioMusic.onEnded(() => {
					//自然播放结束
					this.isPlay = true;
					this.audioMusic.destroy();
					this.audioMusic = null;
				});
				this.audioMusic.onError((res) => {
					this.isPlay = true;
					// this.audioMusic.destroy();
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			},
			// 播放暂停
			handleSuspend(e) {
				console.log('播放暂停', e)
				this.audioMusic.pause();
				this.isPlay = true;
				this.audioMusic.destroy();
				// this.audioMusic.onPause(() => {
				// 	this.isPlay = true;
				// 	this.audioMusic.destroy();
				// });
			},
			// 删除音/视频 type 1、删除视频，2、删除音频
			handleDel(type) {
				if (type == 2 && this.audioMusic) {
					this.audioMusic.pause();
					this.audioMusic.destroy();
				}
				this.audioMusic = null;
				this.isPlay = true;
				this.fileUrl = '';
				this.videoUrl = '';
			},
			// 上传成功
			handleFileSuccess(e) {
				console.log('上传成功', e)
			},
			// 获取上传进度
			handleFileprogress(e) {
				console.log('上传进度：', e)
			},
			// 上传失败
			handleFileFail(e) {
				console.log('上传失败：', e)
			},

			// 上一步
			handleLast() {
				uni.navigateBack(1)
			},
			cancel() {
				this.popup = false;
				this.isShow = false
			},
			gotoInfo() {
				uni.navigateTo({
					url:'/settingPages/pages/setting'
				})
				this.isShow = false
			},
			// 弹窗
			handle() {
				if (!this.introduction) {
					uni.hideLoading();
					return uni.showToast({
						title: '请输入个人简介',
						icon: 'none'
					})
				}
				this.popup = true;
			},
			//下一步
			handleNext() {
				uni.showLoading()
				if (!this.introduction) {
					uni.hideLoading();
					return uni.showToast({
						title: '请输入个人简介',
						icon: 'none'
					})
				}
				let param = JSON.parse(JSON.stringify(this.fromPage));
				param.fileUrls = [];
				param.introduce = this.introduction;
				if (this.imgUrl.length > 0 && this.imgUrl[0].url) {
					param.fileUrls.push({
						type: 'imgUrl',
						url: this.imgUrl[0].url
					})
				}
				if (this.fileUrl) {
					param.fileUrls.push({
						type: 'fileUrl',
						url: this.fileUrl
					})
				}
				if (this.videoUrl) {
					param.fileUrls.push({
						type: 'videoUrl',
						url: this.videoUrl
					})
				}
				if (this.editId) {
					// param.id = this.editId;
					editEdu(param).then((res) => {
						if (res.code == 100000) {
							// Object.assign(this.$data, this.$options.data())
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
							uni.hideLoading();
							if (this.backDelta) {
								uni.navigateBack({
									delta: Number(this.backDelta)
								});
								return
							}
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 1000)
							// uni.navigateTo({
							// 	url:'/pages/mine/homePage/homePage'
							// })
						}
					})
				} else {
					addEducation(param).then((res) => {
						if (res.code == 100000) {
							// Object.assign(this.$data, this.$options.data())
							uni.showToast({
								title: '研究生入驻成功',
								icon: 'none'
							})
							uni.hideLoading();
							if (this.backDelta) {
								// uni.navigateBack(this.backDelta);
								uni.navigateBack({
									delta: Number(this.backDelta)
								});

								return
							}
							// uni.navigateTo({
							// 	url:'/pages/mine/homePage/homePage'
							// })
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 1000)

						}
					})
				}

			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: $pageBgColor;
	}
</style>
<style lang="scss" scoped>
	.info {
		padding: 0 30rpx 120rpx;
		box-sizing: border-box;

		.tip {
			padding: 60rpx 44rpx 40rpx 44rpx;
			box-sizing: border-box;
			justify-content: space-between;

			// margin:0 0 60rpx 0;
			image {
				width: 92rpx;
				height: 84rpx;
				margin: 0 20rpx 0 0;
			}

			.num {
				margin-left: 20rpx;
			}
		}

		.cardItem {
			.introduction {
				background: #fff;
				border: 1px solid rgba(242, 242, 242, 1);
				width: 100%;
				height: 372rpx;
			}

			.upload {
				// justify-content: space-between;
				margin-top: 56rpx;

				.example-body {
					width: 220rpx;
					position: relative;

					.audio-box {
						width: 200rpx;
						height: 200rpx;
						border: 1px dotted $colorccc;
						border-radius: 10rpx;
						justify-content: center;

						.del-icon {
							position: absolute;
							right: 20rpx;
							top: 0px;
							z-index: 9;
						}

						.playItem {
							text-align: center;

							.playTip {
								margin-top: 20rpx;
							}
						}

						.waveGif {
							width: 160rpx;
							height: 30rpx;
							// position: absolute;
							// top: 36rpx;
							// right: 0rpx;
						}
					}
				}

				.pngBox {
					text-align: center;

					.addIcon {
						font-size: 80rpx;
					}

					&>view {
						margin: 0 auto;
					}
				}

				// 上传视频/音频
				.addBox {
					border: 1px dotted $colorccc;
					border-radius: 10rpx;
					width: 200rpx;
					height: 200rpx;
					// margin:100rpx auto 0;
					text-align: center;

					.addIcon {
						font-size: 80rpx;
					}

					&>view {
						margin: 0 auto;
					}
				}
			}


			.hasVideo {
				width: 400rpx;
				position: relative;

				video {
					height: 200rpx;
					width: 400rpx;
					display: block;
					// margin: 100rpx auto 0;
				}

				.del-icon {
					position: absolute;
					right: 10rpx;
					z-index: 9;
				}
			}
		}

		.noWidthBtn {
			width: 200rpx;
			padding: 10rpx 0;
			margin: 30rpx auto 0;
		}

		.btns {
			background: #F7DD5E;
			color: #333;
			text-align: center;
			font-size: 14px;
			border-radius: 40rpx;
			box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, .2);
			position: fixed;
			bottom: 30rpx;
			z-index: 10;
			right: 0;
			margin-right: 94rpx;

			.btn1,
			.btn2 {
				height: 48px;
				line-height: 48px;
				background: #F7DD5E;
				color: #333;
				border-radius: 42px;
				text-align: center;
				width: 280rpx;
				margin: 0 auto;
				justify-content: center;

				.icons {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					background: #fff;
					text-align: center;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.btn1 {
				background: #72819A;
				border-radius: 40rpx;
				border-top-right-radius: 0px;
				border-bottom-right-radius: 0px;

				.icons {
					margin-right: 36rpx;
				}
			}

			.btn2 {
				background: $colorMain;
				border-radius: 40rpx;
				border-top-left-radius: 0px;
				border-bottom-left-radius: 0px;

				.icons {
					margin-left: 36rpx;
				}
			}
		}

		.box {
			width: 500rpx;
			height: 257rpx;
			background-color: #fff;
			border-radius: 30rpx;

			.top {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 40rpx;
				margin-bottom: 30rpx;

				image {
					width: 92rpx;
					height: 84rpx;
					margin-right: 20rpx;
				}
			}

			.bottom {
				.bottom-left {
					width: 50%;
					height: 120rpx;
					background: #72819A;
					border-radius: 0 0 0 30rpx;
					justify-content: center;

					.font {
						font-size: 16rpx;
						margin-left: 10rpx;
					}
				}

				.bottom-right {
					width: 50%;
					height: 120rpx;
					background: #f7dd5e;
					border-radius: 0 0 30rpx 0;
					justify-content: center;
				}
			}
		}
	}
</style>